<template>
  <!-- <div  class="tw-flex tw-justify-center tw-items-center"> -->
  <q-avatar
    v-bind="$attrs"
    :rounded="node.model.avatarStyle === 'rounded'"
    :square="node.model.avatarStyle === 'square'"
    class="tw-w-full tw-h-full"
  >
    <q-img :src="node.model.avatarUrl">
      <template v-slot:error>
        <div class="absolute-full flex flex-center bg-negative text-white">Cannot load image</div>
      </template>
    </q-img>
    <TeleportForm ref="formRef" :node="node">
      <template v-slot:default="{ model }">
        <q-form>
          <div class="q-pa-md">
            <label> 头像风格 </label>
            <q-option-group
              v-model="model.avatarStyle"
              :options="[
                { label: '默认', value: 'default' },
                { label: '圆角', value: 'rounded' },
                { label: '方形', value: 'square' },
              ]"
              inline
            />
            <label> 头像图片 </label>
            <q-file @update:model-value="avatarChange" v-model="model.avatarFile" />
          </div>
        </q-form>
      </template>
    </TeleportForm>
  </q-avatar>

  <!-- </div> -->
</template>
<script>
import { defineComponent, ref } from 'vue';
import defaultProps from 'src/pages/BiographicalNotes/common/defaultProps';
import TeleportForm from '../../TeleportForm/TeleportForm.vue';
export default defineComponent({
  name: 'AvatarComponent',
  props: defaultProps,
  components: {
    TeleportForm,
  },
  setup() {
    const formRef = ref(null);
    const avatarChange = (file) => {
      // console.log('avatarChange', file);
      // 转换成为base64
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (e) => {
        const base64 = e.target.result;
        // console.log('base64', base64);
        formRef.value.updateModel('avatarUrl', `data:${file.type};${base64}`);
        // model.value.avatarUrl = `data:${file.type};${base64}`;
      };
      // const url = URL.createObjectURL(file);
      // console.log('url', url);
      // model.value.avatarUrl = url;
    };
    return { avatarChange, formRef };
  },
});
</script>
